<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <script>
        /**
         * 在 JavaScript 的世界中，所有代码都是单线程执行的。由于这个"缺陷"，导致 JavaScript 的所有网络操作，浏览器事件，
         * 都必须是异步执行。异步执行可以用回调函数实现。一旦有一连串的 ajax 请求 a,b,c,d... 后面的请求依赖前面的请求结果，
         * 就需要层层嵌套。这种缩进和层层嵌套的方式，非常容易造成上下文代码混乱
         */

        const promise = new Promise(function (resolve, reject) {
            // 执行异步操作
            if (/* 异步操作成功 */true) {
                // 调用 resolve，代表 Promise 将返回成功的结果
                resolve(value);
            } else {
                // 调用 reject，代表 Promise 会返回失败结果
                reject(error);
            }
        });

        // 如果我们想要等待异步执行完成，做一些事情，我们可以通过 promise 的 then 方法来实现。
        // 如果想要处理 promise 异步执行失败的事件，还可以跟上 catch：
        promise.then(function (value) {
            // 异步执行成功后的回调
        }).catch(function (error) {
            // 异步执行失败后的回调
        });

        // // Promise 可以封装异步操作
        // let p = new Promise((resolve, reject) => {
        //     // 异步操作
        //     $.ajax({
        //         url: "mock/user.json",
        //         success:function(data){
        //             console.log("查询用户：", data)
        //             resolve(data);
        //         },
        //         error:function(err){
        //             reject(err)
        //         }
        //     });
        // });

        // p.then((obj) => {
        //     return new Promise((resolve, reject) => {
        //         $.ajax({
        //             url: `mock/user_course_${obj.id}.json`,
        //             success: function (data) {
        //                 console.log("查询用户课程：", data)
        //                 resolve(data);
        //             },
        //             error: function (err) {
        //                 reject(err);
        //             }
        //         })
        //     })
        // }).then((obj) => {
        //     $.ajax({
        //         url: `mock/course_score_${obj.id}.json`,
        //         success: function(data){
        //             console.log("查询用户课程成绩：", data)
        //         },
        //         error: function(err){
        //         }
        //     })
        // })

        let get = function(url, data){
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    type: "GET",
                    data: data,
                    success:function(result) {
                        resolve(result);
                    },
                    error:function(err){
                        reject(err);
                    }
                })
            })
        };

        get("mock/user.json").then((result) => {
            console.log("查询用户：", result);
            return get(`mock/user_course_${result.id}.json`);
        }).then((result) => {
            console.log("查询到课程：", result);
            return get(`mock/course_score_${result.id}.json`);
        }).then((result) => {
            console.log("查询到课程的成绩：", result);
        }).catch((err) => {
            console.log("出现异常了：", err);
        })
    </script>
</body>
</html>